/*
 * @Author: Setsuna
 * @Email: 601890383@qq.com
 * @FilePath: \src\pages\QuotaManage\QuotaImport\List\components\ViewCustomerModal.tsx
 * @Date: 2021-08-19 12:02:50
 * @LastEditTime: 2022-05-26 11:35:17
 */
import React from 'react'
import { UdTable, UdFilter, http, UdToolbar } from '@/lib'
import { Spin, Button, Tooltip } from 'antd'
import quotaApis from '@/apis/AboutQuota'
import { downBlobFile, downBlobFileXlsx } from '@/utils/methods'
export default class ViewCustomerModal extends React.Component<any> {
  state = {
    dataSource: [],
    searchValues: {},
    page: 1,
    size: 10,
    total: 0,
    loading: false,
    conditions: [
      { id: 'dealerCode', label: '客户编码' },
      { id: 'dealerName', label: '客户名称' },
    ],
  }
  columns: any = [
    { title: '序号', dataIndex: 'id', key: 'id', width: 50, render: (text, reoled, index) => index + 1 },
    { title: '客户编码', dataIndex: 'dealerCode', key: 'dealerCode', width: 120 },
    { title: '客户名称', key: 'dealerName', dataIndex: 'dealerName', minWidth: '120px' },
    { title: '片区名称', dataIndex: 'belongAreaName', key: 'belongAreaName', width: 120 },
    { title: '配额品项', dataIndex: 'prodBarname', key: 'prodBarname', minWidth: '120px' },

    { title: '考核年度', dataIndex: 'stageYear', key: 'stageYear', type: 'out', width: 80 },
    // { title: '年度标准配额', dataIndex: 'standardQuotaSum', key: 'standardQuotaSum', type: 'out' },
    {
      title: '年度标准配额',
      key: 'standardQuotaSumTitle',
      dataIndex: 'standardQuotaSumTitle',
      align: 'center',
      children: [
        {
          title: '计划内',
          align: 'center',
          dataIndex: 'standardQuotaSum',
          key: 'standardQuotaSum',
          width: 90,
        },
        {
          title: '计划外',
          align: 'center',
          dataIndex: 'standardQuotaSumWay',
          key: 'standardQuotaSumWay',
          width: 90,
        },
      ],
      type: 'out',
    },
    // { title: '年度实际配额', dataIndex: 'actualQuotaSum', key: 'actualQuotaSum', type: 'out' },
    {
      title: '年度实际配额',
      key: 'actualQuotaSumTitle',
      dataIndex: 'actualQuotaSumTitle',
      align: 'center',
      children: [
        {
          title: '计划内',
          align: 'center',
          dataIndex: 'actualQuotaSum',
          key: 'actualQuotaSum',
          width: 90,
        },
        {
          title: '计划外',
          align: 'center',
          dataIndex: 'actualQuotaSumWay',
          key: 'actualQuotaSumWay',
          width: 90,
        },
      ],
      type: 'out',
    },
    // { title: '年度剩余配额', dataIndex: 'residualQuotaSum', key: 'residualQuotaSum', type: 'out' },
    {
      title: '年度剩余配额',
      key: 'residualQuotaSumTitle',
      dataIndex: 'residualQuotaSumTitle',
      align: 'center',
      children: [
        {
          title: '计划内',
          align: 'center',
          dataIndex: 'residualQuotaSum',
          key: 'residualQuotaSum',
          width: 90,
        },
        {
          title: '计划外',
          align: 'center',
          dataIndex: 'residualQuotaSumWay',
          key: 'residualQuotaSumWay',
          width: 90,
        },
      ],
      type: 'out',
    },
    {
      title: '考核阶段',
      dataIndex: 'stageName',
      key: 'stageName',
      type: 'inside',
      width: 150,
      render: (text, record) => {
        return (
          <Tooltip title={record.stageName}>
            <div style={{ width: '150px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
              {record.stageName}
            </div>
          </Tooltip>
        )
      },
    },
    {
      title: '配额有效期',
      dataIndex: 'term',
      width: 160,
      key: 'term',
      render: (text, record) => {
        return `${record.stageBeginTime}-${record.stageEndTime}`
      },
      type: 'inside',
    },
    // { title: '考核阶段标准配额', dataIndex: 'standardQuota', key: 'standardQuota', type: 'inside' },
    {
      title: '考核阶段标准配额',
      key: 'standardQuotaTitle',
      dataIndex: 'standardQuotaTitle',
      align: 'center',
      children: [
        {
          title: '计划内',
          align: 'center',
          dataIndex: 'standardQuota',
          key: 'standardQuota',
          width: 90,
        },
        {
          title: '计划外',
          align: 'center',
          dataIndex: 'standardQuotaWay',
          key: 'standardQuotaWay',
          width: 90,
        },
      ],
      type: 'inside',
    },
    // { title: '考核阶段实际配额', dataIndex: 'actualQuota', key: 'actualQuota', type: 'inside' },
    {
      title: '考核阶段实际配额',
      key: 'actualQuotaTitle',
      dataIndex: 'actualQuotaTitle',
      align: 'center',
      children: [
        {
          title: '计划内',
          align: 'center',
          dataIndex: 'actualQuota',
          key: 'actualQuota',
          width: 90,
        },
        {
          title: '计划外',
          align: 'center',
          dataIndex: 'actualQuotaWay',
          key: 'actualQuotaWay',
          width: 90,
        },
      ],
      type: 'inside',
    },
  ]

  render() {
    return (
      <Spin spinning={this.state.loading}>
        <UdFilter
          items={this.state.conditions}
          onSearch={values => {
            this.handleSearch(values)
          }}
          loading={this.state.loading}
          resetAfter={this.resetFilterHandle}
        />
        <UdToolbar
          other={
            <Button type="primary" onClick={this.exportCustomerTable}>
              导出
            </Button>
          }
        ></UdToolbar>
        <UdTable
          rowKey="id"
          bordered={true}
          columns={this.columns.filter(item => {
            return !item.type || item.type === this.props.type
          })}
          footer={
            this.props.type === 'out'
              ? () => (
                  <div>
                    <span style={{ fontWeight: 'bold', fontSize: 14 }}>主要公式说明</span>
                    <br />
                    经销商计划（内、外）年度标准配额=经销商各阶段计划（内、外）标准配额之和
                    <br />
                    经销商计划（内、外）实际配额=经销商各阶段计划（内、外）实际配额之和 <br />
                    经销商计划（内、外）年度剩余配额=经销商计划（内、外）年度标准配额-经销商计划内年度实际配额
                  </div>
                )
              : void 0
          }
          dataSource={this.state.dataSource}
          onChange={this.handleChangePage}
          pagination={{
            current: this.state.page,
            pageSize: this.state.size,
            total: this.state.total,
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: ['10', '20', '30', '40'],
            showTotal: (total, range) => `共${total}项，当前${range[0]}-${range[1]}项`,
          }}
        ></UdTable>
      </Spin>
    )
  }
  public componentDidMount() {
    this.getCustomerTableData()
  }

  //导出片区table数据
  private exportCustomerTable = () => {
    let url = quotaApis.downloadManageCustomerExcel
    if (this.props.type === 'inside') {
      url = quotaApis.downloadPlanCustomerExcel
    }
    this.setState({ downloading: true })
    http
      .post(url, { id: this.props.record.id, ...this.state.searchValues }, { responseType: 'arraybuffer' })
      .then(res => {
        if (!res.data.code) {
          downBlobFileXlsx(res.data, this.props.title)
        }
      })
      .finally(() => {
        this.setState({ downloading: false })
      })
  }

  private handleChangePage = pagination => {
    const { current: page, pageSize: size } = pagination
    this.setState({ page, size }, () => {
      this.getCustomerTableData()
    })
  }
  private handleSearch = (values: any) => {
    this.setState({ searchValues: values, page: 1 }, () => {
      this.getCustomerTableData()
    })
  }
  private resetFilterHandle = form => {
    this.setState(
      {
        dataSource: [],
        page: 1,
        total: 0,
        searchValues: form.getFieldsValue(),
      },
      () => {
        this.getCustomerTableData()
      }
    )
  }
  private getCustomerTableData = async () => {
    this.setState({ loading: true })
    let url: string = quotaApis.getManageCustomerPage
    if (this.props.type === 'inside') {
      url = quotaApis.getPlanCustomerPage
    }
    try {
      let list: any = await http.post(url, {
        page: this.state.page,
        size: this.state.size,
        conditions: {
          id: this.props.record.id,
          ...this.state.searchValues,
        },
      })
      const dataSource = list.data?.content

      this.setState({
        dataSource,
        page: list.data.number,
        size: list.data.size,
        total: list.data.totalElements,
        loading: false,
      })
    } catch (error) {
      this.setState({
        loading: false,
      })
    }
  }
}
